import React, {
    memo, 
    useCallback, 
    useEffect, 
    useRef, 
    useState
} from 'react'
import { Carousel } from 'antd';
import {
    Wrapper,
    ContentWrapper,
    BannerWrapper
} from "./style";
import { NavLink } from 'react-router-dom';
import CheckSinger from './c-page/check-singer';
import HotAnchor from './c-page/hot-anchor';
import { actionCreators } from './store/index';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import HotRecommend from './c-page/hot-recommend/';
import NewDiscsShelves from './c-page/new-discs-shelves/';
import HotLeaderboard from './c-page/leaderboard/';

export default memo(function Recommend() {

    const [currentIndex, setCurrentIndex] = useState(0);
    const dispatch = useDispatch();
    const carouselRef = useRef();
    useEffect(() => {
        // 从服务器获取数据
        dispatch(actionCreators.getTopBannersAction());
    }, [dispatch])

    // 从redux中获取数据
    const { banners } = useSelector(state => ({
        banners: state.get("recommond").get("banners")
    }), shallowEqual);

    const bgImage = banners[currentIndex] && (banners[currentIndex].imageUrl + "?imageView&blur=40x20");
    const bannerChange = useCallback((from, to) => {
        setTimeout(() => {
            setCurrentIndex(to);
        }, 0);
    }, []);

    return (
        <Wrapper>
            {/* banner */}
            <BannerWrapper bgImage={bgImage}>
                <div className="content wrap-v1">
                    <div className="left">
                        <Carousel className="banner-carousel"
                            beforeChange={bannerChange}
                            autoplay={true}
                            ref={carouselRef}
                        >
                            {
                                banners.map((item, index) => {
                                    return <div className="banner-carousel-wrapper" key={item.imageUrl}>
                                        <img src={item.imageUrl} className="banner-carousel-img"></img>
                                    </div>
                                })
                            }
                        </Carousel>
                    </div>
                    <div className="right download">
                        <NavLink to="/download" className="download-link download">
                        </NavLink>
                        <div className="desc">PC 安卓 iPhone WP iPad Mac 六大客户端</div>
                    </div>
                    <button className="prev recommend_top_image" onClick={() => carouselRef.current.prev()}></button>
                    <button className="next recommend_top_image" onClick={() => carouselRef.current.next()}></button>
                </div>
            </BannerWrapper>

            <ContentWrapper>
                <div className="left">
                    {/* 热门推荐 */}
                    <HotRecommend/>
                    {/* 新碟上架 */}
                    <NewDiscsShelves/>
                    <HotLeaderboard/>
                </div>
                <div className="right">
                    {/* 用户登录 */}
                    <div className="login recommend_image">
                        <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                        <a className="login-btn recommend_image" href="/login">用户登录</a>
                    </div>
                    {/* 入住歌手 */}
                    <CheckSinger />
                    {/* 热门主播 */}
                    <HotAnchor/>
                </div>
            </ContentWrapper>
        </Wrapper>
    )
})

